<template>
  <div class="side-menu-footer">
    <!-- <img src="@/assets/img/collection.png" class="mb10"> -->
    <div v-if="!!solarMap.imgUrl">
      <img :src="solarMap.imgUrl" class="img-type" />
    </div>
    <div class="current-time-type">{{ getDateTime(solarMap.dateTime) }}</div>
    <div class="gregorian-type">
      <div>{{ solarMap.dateDay }}</div>
      <div>{{ solarMap.weekDay }}</div>
    </div>
    <div class="divider-type"></div>
    <div class="lunar-type">
      <div>{{ solarMap.lunarDate }}</div>
    </div>
    <!-- <div class="mt10 mb10">{{ dateMap.currentTerm }}</div> -->
  </div>
</template>

<script>
import { getTime, getDateMap } from "@/utils/dateFormat";
// import { getSolarList } from "@/services/user";
import moment from "moment";
export default {
  name: "SideMenuFooter",
  data() {
    return {
      moment,
      getDateMap,
      currentTime: getTime(),
      timer: null,
      solarImg: "",
      solarMap: {
        dataDay: "",
        dateTime: "",
        imgUrl: "",
        lunarDate: "",
        weekDay: ""
      }
    };
  },
  mounted() {
    this.getDate();
  },
  components: {},
  props: {},
  computed: {
    dateMap() {
      return getDateMap();
    }
  },
  methods: {
    getDate() {
      this.timer = setInterval(() => {
        this.currentTime = getTime();
      }, 30000);
    },
    getDateTime(v) {
      return moment(v).format("HH:mm");
    }
  },
  destroyed() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="less" scoped>
.side-menu-footer {
  background: #eeeef1;
  width: 116px;
  text-align: center;
  position: fixed;
  z-index: 10;
  bottom: 0;
  border-right: 1px solid #f0f0f0;
  font-weight: bold;

  .img-type {
    width: 30px;
    height: 70px;
    margin: 15px;
  }

  .anticon-star {
    font-size: 25px;
    color: #ffd68d;
    cursor: pointer;
    margin-bottom: 20px;
  }

  .current-time-type {
    color: #181b39;
    font-weight: bold;
    font-size: 24px;
  }

  .gregorian-type,
  .lunar-type {
    text-align: center;
    font-size: 12px;
    margin: 10px 0;
  }
  .lunar-type{
    margin-bottom: 30px;
  }

  .divider-type {
    margin: 15px 30px;
    border-top: 1px solid #dee0e3;
  }
}
</style>
